<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;"/>
            <div class="title">
              <span class="title-text">智慧实验室可视化平台</span>
              <dv-decoration-6
                  class="title-bototm"
                  :reverse="true"
                  :color="['#50e3c2', '#67a1e5']"
                  style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
                :reverse="true"
                :color="['#568aea', '#000000']"
                style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);"/>
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 40%">
            <div v-if="showIndex === 1" class="react-right ml-3 bg-color-blue" @click="changeShowIndex(1)"
                 style="width: 6.25rem; text-align: center;"
            >
              <span class="text  fw-b">综合分析</span>
            </div>
            <div v-if="showIndex !== 1" class="react-right ml-4 "
                 style="width: 6.25rem; background-color: #0f1325; text-align: center;" @click="changeShowIndex(1)"
            >
              <span class="text ">综合分析</span>
            </div>
            <div v-if="showIndex === 2" class="react-right ml-3 bg-color-blue" @click="changeShowIndex(2)">
              <span class="text fw-b">能耗分析</span>
            </div>
            <div v-if="showIndex !== 2" class="react-right ml-3" style="background-color: #0f1325;"
                 @click="changeShowIndex(2)">
              <span class="text ">能耗分析</span>
            </div>
            <div v-if="showIndex === 3" class="react-right ml-3 bg-color-blue" @click="changeShowIndex(3)">
              <span class="text fw-b">故障分析</span>
            </div>
            <div v-if="showIndex !== 3" class="react-right ml-3" style="background-color: #0f1325;"
                 @click="changeShowIndex(3)">
              <span class="text ">故障分析</span>
            </div>
          </div>
          <div style="width: 40%" class="d-flex">
            <div v-if="showIndex === 4" class="react-left  mr-3 bg-color-blue" @click="changeShowIndex(4)">
              <span class="text bg-color-blue">气路管理</span>
            </div>
            <div v-if="showIndex !== 4" class="react-left  mr-3" style="background-color: #0f1325;"
                 @click="changeShowIndex(4)">
              <span class="text">气路管理</span>
            </div>
            <div class="react-left mr-4" style="width: 6.25rem; background-color: #0f1325; text-align: center;"
                 @click="startTimer"
            >
              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
            </div>
          </div>
        </div>

        <div v-if="showIndex === 1" class="body-box" style="margin-left: 20px; margin-right: 10px">
          <!-- 第三行数据 -->
          <div class="content-box" style="grid-template-columns: 2fr 10fr 2fr;">
            <div>
              <div>
                <dv-border-box-13>
                  <centerLeft1 :chart-data="centerData"/>
                </dv-border-box-13>
                <dv-border-box-8>
                  <TotalPowerLeft :chart-data="centerData"/>
                </dv-border-box-8>
                <dv-border-box-1>
                  <TotalPowerRatioLeft :chart-data="centerData"/>
                </dv-border-box-1>
                <dv-border-box-12>
                  <YearEnergyLeft :chart-data="centerData"/>
                </dv-border-box-12>
              </div>
            </div>
            <!-- 中间 -->
            <div>
              <div style="height: 100%;width:100%">
                <div style="height: 80%;margin-left: 5px;margin-right: 5px;">
                  <div style="height: 100%">
                    <iframe height="100%" width="100%" scrolling="no" frameborder="0" src="https://www.baidu.com"/>
                  </div>
                </div>
                <dv-border-box-11 title="数据总览"  style="height: 20%">
                  <DataInfoCenter :chart-data="centerData" />
                </dv-border-box-11>
              </div>
            </div>
            <div>
              <div>
                <dv-border-box-13>
                  <AlarmRight1 :chart-data="centerData"/>
                </dv-border-box-13>
                <dv-border-box-12>
                  <SystemEnergyRight2 :chart-data="centerData"/>
                </dv-border-box-12>
                <dv-border-box-8>
                  <DepartEnergyRight2 :chart-data="centerData"/>
                </dv-border-box-8>
              </div>
            </div>
          </div>
        </div>
        <div v-if="showIndex === 2" class="body-box" style="margin-left: 20px; margin-right: 10px">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <div>
                <dv-border-box-12>
                  <energyCenterLeft1 :chart-data="centerData"/>
                </dv-border-box-12>
              </div>
            </div>
            <div>
              <dv-border-box-13>
                <energyCenterLeft2 :chart-data="centerData"/>
              </dv-border-box-13>
            </div>
            <!-- 中间 -->
            <div>
              <energyCenter :chart-data="centerData"/>
            </div>
            <!-- 中间 -->
            <dv-border-box-13>
              <energyCenterRight2 :chart-data="centerData"/>
            </dv-border-box-13>
            <div>
              <dv-border-box-12>
                <energyCenterRight1 :chart-data="centerData"/>
              </dv-border-box-12>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-8>
              <energyMiddleLeft :chart-data="centerData"/>
            </dv-border-box-8>
            <dv-border-box-8 :reverse="true">
              <energyMiddleRight :chart-data="centerData"/>
            </dv-border-box-8>
          </div>
        </div>
        <div v-if="showIndex === 3" class="body-box" style="margin-left: 20px; margin-right: 10px">
          <!-- 第三行数据 -->
          <div class="main-container">
            <div class="mc-top">
              <Top-Left-Cmp :chart-data="centerData"/>
              <Top-Middle-Cmp :chart-data="centerData"/>
              <Top-right-Cmp :chart-data="centerData"/>
            </div>
            <div class="mc-bottom">
              <dv-border-box-6 class="bottom-left-container">
                <dv-decoration-4 class="mcb-decoration-1" style="width:5px;height:45%;" :chart-data="centerData"/>
                <dv-decoration-4 class="mcb-decoration-2" style="width:5px;height:45%;" :chart-data="centerData"/>
                <Bottom-Left-Chart-1 :chart-data="centerData"/>
                <Bottom-Left-Chart-2 :chart-data="centerData"/>
              </dv-border-box-6>

              <div class="bottom-right-container">
                <Bottom-Right-Table-1 :chart-data="centerData"/>
                <Bottom-Right-Table-2 :chart-data="centerData"/>
                <Bottom-Right-Table-3 :chart-data="centerData"/>
                <Bottom-Right-Table-4 :chart-data="centerData"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import {formatTime} from '@/utils'
import centerLeft1 from "./centerLeft1";
import energyCenterLeft1 from "@/views/energyCenterLeft1";
import energyCenterLeft2 from "@/views/energyCenterLeft2";
import energyCenterRight1 from "./energyCenterRight1";
import TopLeftCmp from "./TopLeftCmp";
import TopMiddleCmp from "./TopMiddleCmp";
import TopRightCmp from './TopRightCmp'
import energyCenterRight2 from "./energyCenterRight2";
import energyCenter from "./energyCenter";
import energyMiddleLeft from "@/views/energyMiddleLeft";
import energyMiddleRight from "@/views/energyMiddleRight";
import BottomLeftChart1 from './BottomLeftChart1'
import BottomLeftChart2 from './BottomLeftChart2'
import TotalPowerLeft from "@/views/TotalPowerLeft";
import TotalPowerRatioLeft from "@/views/TotalPowerRatioLeft";
import YearEnergyLeft from "@/views/YearEnergyLeft";
import AlarmRight1 from "@/views/AlarmRight1";
import SystemEnergyRight2 from "@/views/SystemEnergyRight2";
import DepartEnergyRight2 from "@/views/DepartEnergyRight2";

import BottomRightTable1 from './BottomRightTable1'
import BottomRightTable2 from './BottomRightTable2'
import BottomRightTable3 from './BottomRightTable3'
import BottomRightTable4 from './BottomRightTable4'
import DataInfoCenter from "@/views/DataInfoCenter";
import {getDashboard} from '@/api/dashboard'

export default {
  data() {
    return {
      centerData: {
        content: {
          availability: 0,
          yearEnergy: 0,
          monthEnergy: 0,
          todayEnergy: 0,
          yearFault: 0,
          monthFault: 0,
          weekFault: 0,
          powerRate: 0,
          faultRate: 0,
          placeRates: [],
          yearDepts: []
        }
      },
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      showIndex: 1,
      intervalTime: 60000,
      timer: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: {
    centerLeft1,
    energyCenterLeft1,
    TopLeftCmp,
    TopMiddleCmp,
    TopRightCmp,
    energyCenterLeft2,
    energyCenterRight1,
    energyCenterRight2,
    energyMiddleLeft,
    energyMiddleRight,
    energyCenter,
    TotalPowerLeft,
    BottomLeftChart1,
    BottomLeftChart2,
    BottomRightTable1,
    BottomRightTable2,
    BottomRightTable3,
    BottomRightTable4,
    TotalPowerRatioLeft,
    YearEnergyLeft,
    DataInfoCenter,
    AlarmRight1,
    SystemEnergyRight2,
    DepartEnergyRight2
  },
  created() {
    this.initWebSocket()
  },
  mounted() {
    this.$nextTick(() => {
      this.getData()
    })
    this.timeFn();
    this.cancelLoading();
    this.timer = setInterval(() => {
      this.showIndex++;
      if (this.showIndex === 4){
        this.showIndex = 1
      }
    },this.intervalTime )
  },
  methods: {
    timeFn() {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    changeShowIndex(val) {
      // this.getData()
      this.showIndex = val;
      if (this.timer != null) {
        clearInterval(this.timer)
      }
      this.timer = null
      this.$nextTick(() => {
        const data = this.centerData
        this.centerData = null
        this.centerData = data
      })
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.showIndex++;
        if (this.showIndex === 4) {
          this.showIndex = 1
        }
        this.$nextTick(() => {
          const data = this.centerData
          this.centerData = null
          this.centerData = data
        })
      }, this.intervalTime)
    },
    getData() {
      // getDashboard().then(res => {
      //   console.log(res)
      // })
      getDashboard().then(res => {
        if (res != null) {
          this.centerData = res
          this.showIndex = -1
          this.$nextTick(() => {
            this.showIndex = 1
          })
        }
      })
    },
    initWebSocket() {
      const wsUri = 'ws://192.168.1.101:8000/webSocket/bigdata'
      // const wsUri = 'ws://192.168.124.24:8000/webSocket/bigdata'
      this.websock = new WebSocket(wsUri)
      this.websock.onerror = this.webSocketOnError
      this.websock.onmessage = this.webSocketOnMessage
    },
    webSocketOnError() {
      this.$notify({
        title: 'WebSocket连接发生错误',
        type: 'error',
        duration: 0
      })
    },
    webSocketOnMessage(e) {
      const data = JSON.parse(e.data)
      if (data.msgType === 'INFO') {
        this.centerData = JSON.parse(data.msg)
        console.log(this.centerData)
      }
    },
    webSocketSend(agentData) {
      this.websock.send(agentData)
    }
  }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';

.main-container {
  height: 11.5rem;
  background-color: rgba(19, 25, 47, 0.6);
  border-radius: 0.125rem;
  margin-right: 0.15rem;
  margin-bottom: 0.1rem;

  .mc-top, .mc-bottom {
    box-sizing: border-box;
    padding: 30px;
    display: flex;
  }

  .mc-top {
    height: 40%;
  }

  .mc-bottom {
    height: 60%;
  }

  .top-left-cmp, .bottom-left-container {
    width: 32%;
  }

  .top-middle-cmp, .top-right-cmp {
    width: 34%;
  }

  .bottom-left-container {
    position: relative;

    .border-box-content {
      display: flex;
    }

    .mcb-decoration-1, .mcb-decoration-2 {
      position: absolute;
      left: 50%;
      margin-left: -2px;
    }

    .mcb-decoration-1 {
      top: 5%;
      transform: rotate(180deg);
    }

    .mcb-decoration-2 {
      top: 50%;
    }

    .bottom-left-chart-1, .bottom-left-chart-2 {
      width: 50%;
      height: 100%;
    }
  }

  .bottom-right-container {
    width: 68%;
    padding-left: 30px;
    box-sizing: border-box;
    display: flex;
  }
}
</style>
